<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('./font/webfont.eot');
            /* IE9 */
            src: url('./font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./font/webfont.woff2') format('woff2'), url('./font/webfont.woff') format('woff'), /* chrome、firefox */
            url('./font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('./font/webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        
        .web-font {
            font-family: "webfont";
            font-size: 32px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>

<body>
    <i class="web-font">我的优点是：我很帅;但是我的缺点是：我帅的不明显。</i>
</body>

</html>